<template>
  <div class="pakj-loading">
    <md-popup :value="value" :has-mask="true" :mask-closable="false" prevent-scroll>
      <md-activity-indicator
        class="pakj-loading-indicator"
        :type="type"
        :size="size"
        :text-size="textSize"
        color="light"
        text-color="#ffffff"
        @input="$_onInput"
        @show="$_onShow"
        @hide="$_onHide"
      >{{content}}</md-activity-indicator>
    </md-popup>
  </div>
</template>

<script>
import { Popup, ActivityIndicator } from 'mand-mobile';

export default {
  name: 'loading',

  components: {
    [Popup.name]: Popup,
    [ActivityIndicator.name]: ActivityIndicator
  },

  props: {
    value: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: '加载中...'
    },
    appendTo: {
      default: () => document.body
    },
    type: {
      type: String,
      default: 'spinner' // roller, spinner, carousel
    },
    size: {
      type: Number,
      default: 30
    },
    color: {
      type: String,
      default() {
        if (this.type === 'spinner') {
          return 'dark';
        } else {
          return '#fc9153';
        }
      }
    },
    textColor: {
      type: String,
      default: '#fff'
    },
    textSize: {
      type: Number,
      default: 14
    },
    vertical: {
      type: Boolean,
      default: false
    }
  },

  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },

  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  },

  methods: {
    $_onInput(val) {
      this.$emit('input', val);
    },
    $_onShow() {
      this.$emit('show');
    },
    $_onHide() {
      this.$emit('hide');
    },
    close() {
      this.$emit('hide', false);
    }
  }
};
</script>

<style lang="stylus">
.pakj-loading {
  position: relative;
  z-index: 9999;
  width: 100vw;
  height: 100vh;

  .pakj-loading-indicator {
    z-index: 9999;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
  }
}
</style>
